<template>
  <div class="mform">
    <div class="back">
      <Back>
        <div class="form-btn">
          <el-button type="primary" @click="save()">保存</el-button>
        </div>
      </Back>
    </div>
    <div class="form-content">
      <div class="com-body">
        <!-- 左侧组件 -->
        <div class="com-l">
          <div class="type-box type-img" @click="typeClick(item.type)" v-for="(item, index) in type_list" :key="index">
            <el-icon class="type-icon">
              <component :is="item.icon" />
            </el-icon>
            <div class="type-txt">{{ item.name }}</div>
          </div>
        </div>
        <div class="com-c">
          <div class="topc">
            <div class="e-form-label">名称</div>
            <el-input v-model="pageInfo.name" type="text" placeholder="请输入名称" style="width: 186px;" />
            <div class="e-form-label">键值</div>
            <el-input v-model="pageInfo.key" type="text" placeholder="请输入键值" style="width: 186px;" />
          </div>
          <div class="page-main" :style="{ background: pageView[0].bg_color }">
            <div class="pagec-header" @click="moduleClick(0)" :style="{ background: pageView[0].title_bg_color }">
              <div id="header-name" :style="{ color: pageView[0].title_color }"> {{ pageView[0].title }}
              </div>
            </div>
            <div class="page-module-view">
              <!-- <draggable :list="pageView" ghost-class="ghost" chosen-class="chosenClass" animation="300"> -->
              <!-- <template #item="{ element, index }"> -->
              <div class="item" v-for="(element, index) in pageView" :key="index">
                <div class="page-module-view" @click.stop="moduleClick(index)">
                  <!-- waiting -->
                  <component :is="type_list[element.type]['com']" :info="element" v-if="element.type != 'Header'">
                  </component>
                  <!-- 操作按钮 -->
                  <div class="btn-group" v-if="element.type != 'Header'">
                    <el-icon @click.prevent.stop="downModuleItem(index)">
                      <Bottom />
                    </el-icon>
                    <el-icon @click.prevent.stop="upModuleItem(index)">
                      <Top />
                    </el-icon>
                    <el-icon @click.prevent.stop="delModuleItem(index)">
                      <Close />
                    </el-icon>
                    <el-icon @click.prevent.stop="copyModuleItem(index)">
                      <CopyDocument />
                    </el-icon>
                  </div>
                </div>
              </div>
              <!-- </template> -->
              <!-- </draggable> -->

            </div>
          </div>
        </div>
        <div class="com-r">
          <EditForm :info="currInfo" v-if="is_right"></EditForm>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="PagesDetail">
import draggable from 'vuedraggable'
import EditForm from './com/edit/index'

import HotImage from './com/view/HotImage.vue'
import Banner from './com/view/Banner.vue'
import Space from './com/view/Space.vue'
import Nav from './com/view/Nav.vue'
import FlexImg from './com/view/FlexImg.vue'
import Alr from './com/view/Alr.vue'
import BannerGoods from './com/view/BannerGoods.vue'
import ModuleGoods from './com/view/ModuleGoods.vue'

const { proxy } = getCurrentInstance()

//保存
async function save() {
  if (!pageInfo.name) {
    ElMessage({ type: 'error', message: '名称不能为空' });
    return
  }
  let res = await proxy.$post('MallPageSave', {
    name: pageInfo.name,
    key: pageInfo.key,
    info: JSON.stringify(pageView.value),
    id: pageInfo.id || '',
  })
  if (res.code === 0) {
    ElMessage({ type: 'success', message: '保存成功' });
    proxy.$bus.emit('back');
  }
}

const pageInfo = reactive({
  name: '',
  key: '',
  id: ''
})

const pageView = ref([{
  type: 'Header',
  title: '悟空商城',
  bg_color: '#fff',
  title_bg_color: '#fff',
  title_color: '#000',
  bg_img: ''
}])

const type_list = ref({
  HotImage: {
    name: '热区图片',
    icon: 'PictureRounded',
    type: 'HotImage',
    com: HotImage
  },
  Banner: {
    name: '轮播',
    icon: 'Film',
    type: 'Banner',
    com: Banner
  },
  Space: {
    name: '占位高度',
    icon: 'FullScreen',
    type: 'Space',
    com: Space
  },
  Nav: {
    name: '导航栏',
    icon: 'Menu',
    type: 'Nav',
    com: Nav
  },
  FlexImg: {
    name: '并排图',
    icon: 'Picture',
    type: 'FlexImg',
    com: FlexImg
  },
  Alr: {
    name: '左轮播右广告',
    icon: 'ScaleToOriginal',
    type: 'Alr',
    com: Alr
  },
  BannerGoods: {
    name: '轮播商品',
    icon: 'SwitchFilled',
    type: 'BannerGoods',
    com: BannerGoods
  },
  ModuleGoods: {
    name: '模块商品',
    icon: 'GoodsFilled',
    type: 'ModuleGoods',
    com: ModuleGoods
  }
})

const currType = ref('Header')
const currIndex = ref(0)
const currInfo = ref({})
const is_right = ref(false)

function typeClick(type) {
  is_right.value = false
  currType.value = type
  var pushItem = {
    type: type,
    info: {},
    list: []
  }
  pageView.value.push(pushItem)
  currInfo.value = pushItem
  currIndex.value = pageView.value.length - 1
  setTimeout(() => {
    is_right.value = true
  }, 1);
}
// 模块点击
function moduleClick(index) {
  is_right.value = false
  currIndex.value = index
  currInfo.value = pageView.value[index]
  currType.value = currInfo.value.type
  setTimeout(() => {
    is_right.value = true
  }, 1);
}
// 下移
function downModuleItem(index) {
  moduleClick(0)
  if (index != 0 && index < pageView.value.length - 1) {
    [pageView.value[index], pageView.value[index + 1]] = [pageView.value[index + 1], pageView.value[index]]
  }
}
// 上移
function upModuleItem(index) {
  moduleClick(0)
  if (index != 1) {
    [pageView.value[index], pageView.value[index - 1]] = [pageView.value[index - 1], pageView.value[index]]
  }
}
// 删除
function delModuleItem(index) {
  pageView.value.splice(index, 1)
  if (index == pageView.value.length - 1) {
    currInfo.value = pageView.value[pageView.value.length - 1]
  } else {
    currInfo.value = pageView.value[index - 1]
  }
  currType.value = currInfo.value.type

}
// 复制
function copyModuleItem(index) {
  let info = JSON.parse(JSON.stringify(pageView.value[index]));
  pageView.value.push(info)
  moduleClick(pageView.value.length - 1)
}

onMounted(() => {
  moduleClick(0)
  // 编辑
  let id = proxy.$route.query.id || null;
  if (id) {
    getDetail(id)
  }
});

async function getDetail(id) {
  let res = await proxy.$post('MallPageDetail', {
    id
  }, false)
  if (res.code === 0) {
    pageInfo.name = res.data.name
    pageInfo.id = res.data.id
    pageInfo.key = res.data.key

    pageView.value = res.data.info || [{
      type: 'Header',
      title: '悟空商城',
      bg_color: '#fff',
      title_bg_color: '#fff',
      title_color: '#000',
      bg_img: ''
    }]

    moduleClick(0)

  }
}


</script>
<style scoped lang="scss">
.com-body {
  width: 100%;
  height: 100%;
  display: flex;

  .com-l {
    width: 200px;
    height: 100%;
    border-right: 1px solid #ececec;
    overflow: hidden;

    .type-box {
      float: left;
      width: 94px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .type-icon {
        font-size: 24px;
        margin-bottom: 5px;
      }

      .type-txt {
        font-size: 12px;
      }
    }

  }


  .com-c {
    width: 520px;
    height: auto;
    display: flex;
    flex-direction: column;

    .topc {
      width: 100%;
      display: flex;
      height: 33px;
    }


    .page-main {
      width: 375px;
      flex: 1;
      position: relative;
      border: 1px solid #ececec;
      margin: 10px;

      .pagec-header {
        width: 375px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        border-bottom: 1px solid #ececec;
        border-right: 1px solid #ececec;
      }

      .page-module-view {
        width: 375px;
        position: relative;
      }

      .btn-group {
        position: absolute;
        left: 375px;
        top: 0;
        z-index: 4;
        display: flex;
        align-items: center;
      }

      .btn-group .el-icon {
        margin-left: 12px;
        font-size: 16px;
        color: #f00;
      }
    }

  }


  .com-r {
    flex: 1;
    border-left: 1px solid #ececec;

    .edit-form {
      padding: 10px;
      box-sizing: border-box;
    }

  }

}


.e-form-label {
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.e-item {
  width: 100%;

}
</style>
